<template>
  <div class="ec_child" id="main"></div>
</template>

<script>
export default {
  data() {
    return {
      res: {},
      name: [],
      num: []
    }
  },
  methods: {
    initChart() {
      var myChart = this.$echarts.init(document.getElementById("main"));
      myChart.setOption({
        title: {
          text: "各学院报到人数",
          left: "center"
        },
        tooltip: {},
        xAxis: {
          data: this.name,
          axisLabel: {
            interval: 0,//横轴信息全部显示
            margin: 10, //刻度标签与轴线之间的距离
            textStyle: {
              fontSize: 12, //横轴字体大小
              color: "#000000",//颜色
            },
          },
        },
        yAxis: {},
        series: [
          {
            name: "人数",
            type: "bar",
            data: this.num,
          },
        ],
      });
    },
    initData() {
      // console.log(this.res);
      for (let key in this.res) {
        // console.log(this.res[key]);
        for (let ikey in this.res[key]) {
          // console.log(ikey);
          this.name.push(ikey);
          this.num.push(this.res[key][ikey]);
        }
      }
      // console.log(this.name);
      // console.log(this.num);
    }
  },
  mounted() {
    this.$axios
      .get('../../public/testData/data.json')
      .then((res) => {
        this.res = res.data.data.college;
        this.initData();
        this.initChart();
      })


  },
};
</script>
 